<template>
  <div class="content">
    <div class="title">
      <div class="text">
        <div class="font">计划总收入(元)</div>
        <div class="money">126,560</div>
      </div>
      <div class="text">
        <div class="font">实际总收入(元)</div>
        <div class="money">126,560</div>
      </div>
    </div>
    <div class="echart">
      <div id="echart" style="width:100%;height:100px;" />
    </div>
    <div class="title">
      <div class="text">
        <div class="font">本月收入(元)&nbsp;&nbsp;&nbsp;<span class="number">¥ 12,423</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Play',
  data() {
    return {

    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawPie()
    })
  },
  methods: {
    drawPie() {
      const myChart = this.$echarts.init(document.getElementById('echart'))
      const option = {
        grid: {
          left: '0',
          right: '0',
          bottom: '3%',
          containLabel: false
        },
        xAxis: [
          {
            show: false,
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
          }, {
            axisPointer: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#57617B'
              }
            },
            axisTick: {
              show: false
            }

          }],
        yAxis: [{
          show: false,
          type: 'value',
          name: '单位（%）',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: [
          {
            name: '总收入',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(137, 189, 27, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(137, 189, 27, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#1890FF',
                borderColor: 'rgba(20,145,255,0.27)',
                borderWidth: 12

              }
            },
            data: [210, 22, 33, 22, 33, 22, 33, 22, 33, 22, 33]
          }
        ]
      }
      myChart.setOption(option, window.onresize = myChart.resize)
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  // color: #ffffff;
  padding: 10px;
  .title{
    display: flex;
    .text{
      flex: 1;
      text-align: left;
      .font{
        font-size: 12px;
        font-weight: 400;
        color: #30eaff;
        padding: 5px 0;
        .number{
          font-size:14px;
          font-weight:500;
          color:rgba(255,255,255,0.85);
        }
      }
      .money{
         font-size: 12px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .echart{
    margin: -45px 0 16px 0;
  }
}
</style>
